<template>
  <div style="display: flex">
    <!-- 全国地图 -->
    <div ref="map" id="myChart" :style="{
      width: '50%',
      height: '100vh',
    }"></div>
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption" v-if="data">
      <swiper-slide v-for="x in data.data" :key="x.id" :id="x.prov">
        <div class="imgs">
          <img :src="`/image/${x.img}`" alt="" />
          <div></div>
          <h2>{{ x.prov }}</h2>
          <p>{{ x.lovend }}</p>
          <p>{{ x.represent }};&nbsp;{{ x.represent1 }}...</p>
        </div>
        <div class="titles">
          <p v-html="x.detail"></p>
          <span @click="goSubject(x.prov)"><img src="image/专题logo.png" alt="" /> 查看专题</span>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" style="bottom:-10px"></div>
    </swiper>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../assets/plugins/map.js";
export default {
  data() {
    return {
      name: "",
      data: null,
      myChart: null,
      option: {
        toolbox: {
          show: false,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {
              readOnly: false,
            },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "feiyimeishi",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: false,
              },
            },
            data: [{ name: "广东", selected: true }],
            // 鼠标焦点
            emphasis: {
              // 字体颜色
              label: {
                color: "#fff",
              },
              // 地区颜色
              itemStyle: {
                areaColor: "#6f1313",
                bmap: {
                  roam: true,
                  zoom: 2,
                },
              },
            },
            // 鼠标选中
            select: {
              // 地区颜色
              itemStyle: {
                areaColor: "#6f1313",
              },
              // 字体颜色
              label: {
                color: "#fff",
              },
            },
          },
        ],
      },
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true,
        },
        loop: true,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        on: {
          slideChange: function () {
            // 监听swiper的变化 其中 重庆序号为 1 2 上海为3 广东为4 四川为5
            // console.log(this.activeIndex);
            // console.log(this);
            // if (this.activeIndex == 1 || this.activeIndex == 2) {
            //   vue.data.option.series[0].data[0].name = "重庆";
            // }
          },
        },
      },
    };
  },
  watch: {},

  mounted() {
    this.drawBar();
    this.indexswiper();
  },
  methods: {
    // swiper轮播图
    indexswiper() {
      const url = "/index/swiper";
      this.axios.get(url).then((res) => {
        this.data = res.data;
      });
    },
    // Echrats制作地图
    drawBar() {
      this.myChart = echarts.init(document.getElementById("myChart"));
      this.myChart.setOption(this.option);
      this.myChart.on("click", function (e) {
        console.log(e);
        console.dir(e);
        if (e.name == "四川") {
          document.querySelectorAll(".swiper-pagination-bullet")[0].click();
        } else if (e.name == "重庆") {
          document.querySelectorAll(".swiper-pagination-bullet")[1].click();
        } else if (e.name == "上海") {
          document.querySelectorAll(".swiper-pagination-bullet")[2].click();
        } else if (e.name == "广东") {
          document.querySelectorAll(".swiper-pagination-bullet")[3].click();
        } else {
          alert("该区域美食收录中，请耐心等待...");
        }
      });
    },
    goNav(e) {
      // console.log(e);
      this.$router.push("/nav?name=" + e);
    },
    goSubject(e) {
      // console.log(e);
      this.$router.push("/subject?prov=" + e);
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes zhuanti {
  from {
    box-shadow: inset 0 0 75px 75px rgb(226, 74, 74), 0 0 0 rgb(226, 74, 74);
  }

  to {
    box-shadow: inset 0 0 0px 0px transparent, 0 0 0px 19px transparent;
  }
}

.swiper {
  position: relative;
  top: 0;
  width: 35%;
  height: 36vw;
  margin-top: 70px;
  border-radius: 10px;
  -webkit-transition: 0.2s;
  cursor: pointer;
  --swiper-pagination-color: transparent;

  .swiper-wrapper {
    height: 100%;
    overflow: hidden !important;
  }

  &:hover {
    position: relative;
    top: -1.5rem;
    transition: top 0.3s;
  }

  .swiper-slide {
    width: 100%;
    height: 100%;
    color: rgba(225, 225, 225);

    .imgs {
      position: relative;

      >div {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
      }

      >img {
        width: 100%;
        vertical-align: middle;
      }

      >h2 {
        position: absolute;
        bottom: 26%;
        left: 4%;
      }

      >p:first-of-type {
        position: absolute;
        bottom: 15%;
        left: 4%;
        color: #777;
      }

      >p:last-child {
        position: absolute;
        bottom: 3%;
        left: 4%;
      }
    }

    .titles {
      height: 13vw;
      padding: 0 4%;
      border-radius: 0 0 5px 5px;
      box-shadow: inset 0px 50px 300px 56px #000;

      >p {
        height: 90px;
        font-size: 12px;
      }

      >span {
        display: block;
        height: 10%;
        width: 90px;
        padding: 8px 20px;
        margin: 10px auto;
        font-size: 14px;
        text-align: center;
        border-radius: 20px;
        background-color: rgb(226, 74, 74);
        animation: zhuanti 1s cubic-bezier(0, 0, 0.2, 1) infinite;
        box-shadow: inset 0 0 75px 75px rgb(226, 74, 74), 0 0 0 rgb(226, 74, 74);

        >img {
          height: 80%;
          vertical-align: middle;
        }

        &:hover {
          background-color: rgb(201, 43, 43);
        }
      }
    }
  }
}
</style>
